<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/swiper.min.css">
  <link rel="stylesheet" href="../../css/style.css">
  <style>
    .swiper-wrapper {
      height: 165px;
    }
    .small_box {
      width: 447px;
      height: 75px;
      /*background-color: pink;*/
      margin-bottom: 10px;
      cursor: pointer;
    }
    .small_box:last-of-type {
      margin-bottom: 0;
    }
    .img_box {
      width: 136px;
      height: 73px;
      margin-right: 20px;
    }
    .img_box1 {
      width: 136px;
      height: 73px;
    }
    .img_box1 img {
      width: 100%;
      height: 73px;
    }
    .word_box {
      font-size: 16px;
      color: #ffffff;
      line-height: 18px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .time_box {
      font-size: 14px;
      color: #ADADAD;
      margin-top: 8px;
    }
    .thing_box {
      padding-top: 8px;
      width: 290px;
    }
  </style>
</head>
<body style="overflow: hidden;">
<div class="swiper-container" id="swiperBox">
  <div class="swiper-wrapper" id="j03BottomBox">

  </div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
  $(function() {

    $('#j03BottomBox').on('click', '.small_box', function() {
      let idx = $(this).attr('data-index');
      // let idx = $(this).data('index')
      window.parent.parent.postMessage({'data':brr[idx],'type':'openPop'},'*')
    })

    let brr = []

    getJson('qytt_JCDT.json', {},function(res) {
      if (res.code === 200) {
        brr = res.data
        for (let i = 0; i < res.data.length; i+=2) {
          let arr = res.data.slice(i, i+2)
          let str = `<div class="swiper-slide">`
          for (let j = 0; j < arr.length; j++) {
            str += `<div class="small_box fix">
                      <div class="img_box l">
                        <img class="img_box1" src="../../img/all/alll${j+i+4}.jpg" alt="">
                      </div>
                      <div class="thing_box l">
                        <div class="word_box">${arr[j].title}</div>
                        <div class="time_box">${arr[j].screenDate.split(" ")[0]}</div>
                      </div>
                    </div>`
          }
          str += `</div>`
          $('#j03BottomBox').append(str)
        }
        new Swiper("#swiperBox", {
          autoplay: false,//可选选项，自动滑动
          loop:true,
          direction: "vertical",
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
      }
    })

  })
</script>
</html>
